<script lang="ts" setup>
	import { ref } from "vue";
	import wContainer from '@/uni_modules/simple-waterfall/components/simple-waterfall/w-container.vue'
	import wItem from '@/uni_modules/simple-waterfall/components/simple-waterfall/w-item.vue'
	import {
		useRouter
	} from 'uni-mini-router';
	let router = useRouter();
	let props = defineProps(['list'])
	const routerLink = (item) => {
		let url;
		if (item.isType == 1) {
			url = 'rentDetail'
		} else {
			url = 'goodsDetail'
		}
		router.push({
			name: url,
			params: {
				id: item.id
			}
		})
	}
	// 商城的列表组件
</script>
<template>
	<view class="leaseRecommend">
		<view class="lGodosBox">
			<!-- <wContainer :columnNumber="2"> -->
			<view class="lGoods" v-for="(item, index) in props.list" :key="index" @click="routerLink(item)">
				<view class="">
					<image class="lImg" :src="item.image"></image>
					<view class="lContent">
						<view class="lcTit u-line-2">
							{{ item.name }}
						</view>
						<view class="lcPrice">
							<text class="price1 intFont"><text style="font-size: 20rpx;">￥</text>{{ item.price }}</text>
							<view class="lcPriceI r-flex-start-end intFont">
								<text>￥{{ item.vipPrice }}</text>
								<image src="http://image.qiniu.qdytcy.com/2023/7/12/vipTag.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- </wContainer> -->
		</view>
	</view>
</template>
<style lang="scss" scoped>
	.leaseRecommend {

		.lGodosBox {
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.lGoods:last-child {
				padding-bottom: 150rpx;
			}

			.lGoods {
				width: 296rpx;
				// height: 450rpx;
				margin: 10rpx 0;
				border-radius: 10rpx;
				// border: 1rpx solid #000;

				.lImg {
					width: 100%;
					height: 302rpx;
				}

				.lContent {
					// height: 120rpx;
					padding: 0 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.lcTit {
						font-size: 26rpx;
						// height: 62rpx;
					}

					.lcPrice {

						.price1 {
							color: red;
							font-size: 36rpx;
						}

						.lcPriceI {
							text:nth-child(1) {
								color: #000;
								font-size: 24rpx;
								margin-right: 10rpx;
							}

							image {
								width: 60rpx;
								height: 28rpx;
							}
						}

					}
				}
			}
		}
	}
</style>